<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #app {
            padding: 20px;
        }

        .city, .type, .data {
            border: 1px solid #eee;
            padding: 10px;
            margin: 10px 0;
        }

        .city li, .type li {
            padding: 5px 15px;
        }

        .city li.active, .type li.active {
            background-color: orangered;
            color: white;
        }

        .data li {
            border-bottom: 1px solid #e5e9f2;
        }

        .data img {
            width: 200px;
        }

        .data .right {
            margin-left: 15px;
        }

        .data p {
            margin: 15px;
        }

        .data .title {
            font-weight: bold;
        }

        /*属性选择器*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<!--v-cloak 在页面渲染的时候先出现模板就是beforemount 然后mounted 但是如果一开始出现先看到模板可以在容器加属性-->
<!--v-cloak属性在页面渲染完成也及时mounted阶段 属性会自动消失-->
<div id="app" v-cloak>
    <ul class="flex city">
        <li>城市：</li>
        <!--绑定class属性的两种方式：传对象的写法 如果后面的表达式为true 前面就绑定该属性-->
        <li v-for="(city,i) in cityList" :class="{active:i===cityActive}" @click="cityActive=i">{{ city }}</li>
    </ul>
    <ul class="flex type">
        <li>分类：</li>
        <!--方式二 字符串的形式绑定：三元表示 传表达式的写法-->
        <li v-for="(type,i) in typeList" :class='i===typeActive?"active":""' @click="typeActive=i">{{ type }}</li>
    </ul>
    <ul class="data">
        <li class="flex" v-for="(data,i) in dataList">
            <img :src="data.img" alt="图片">
            <div class="right">
                <p class="title">{{ data.title }}
                <p class="address">{{ data.address }}</p>
            </div>
        </li>
    </ul>
</div>
<script>
    Vue.config.devtools=false;
    Vue.config.productionTip = false;
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                cityActive: 0,
                typeActive: 0,
                cityList: ['全部', '北京', '上海', '南京', '苏州'],
                typeList: ['全部', '演唱会', '音乐会', '体育'],
                dataList: [{
                    title: "【北京】 2021 WAGF 音乐节 Gin《Passage》 吉他音乐会",
                    address: "北京 | 东方梅地亚中心M剧场 ",
                    img: "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Ssxoub2GdSKPKpwqI_!!2251059038.jpg_q60.jpg_.webp"
                }, {
                    title: "【北京】 【夏天的梦】斑马森林乐队 全场酒水畅饮",
                    address: "北京 | MAO Livehouse北京 ",
                    img: "https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN01NhViRr2GdSKN03wI8_!!2-item_pic.png_q60.jpg_.webp"
                }, {
                    title: "「YEAH!!KPOP VOL.1」夜猫KPOP ALL NIGHT",
                    address: "北京 | MAO Livehouse北京 ",
                    img: "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01Yg63hb2GdSKRQry16_!!2251059038.png_q60.jpg_.webp"
                }]
            }
        },

    });
    // setTimeout(() => {
    //     vm.$mount("#app")
    // }, 5000)

</script>

</body>
</html>